<template>
  <div>
    <div class="my-cell" @click="showTree">
      <div class="my-cell-title">
        <span class="weui-label" style="width:100px">{{title}}</span>
      </div>
      <div class="my-cell-content">
        <tag v-for="(item,index) in checked" :key="index" @click="deleteCheck" :value="item" :closable="!readonly"></tag>
      </div>
      <div class="my-cell-icon" v-if="!readonly">
        <icon name="plus" class="default-icon"></icon>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="show" height="100%" @on-hide="closeMask" :popup-style="{'z-index':9998}">
        <popup-header right-text="确定" :title="title" :show-bottom-border="false" @on-click-right="check"></popup-header>
        <div class="after-search" style="height:calc(100%)">
          <dept-tree-root :list="tree" :value="checked" :checkbox="true" :loadData="true" name="dn"
            children="sub" ref="tree" :multiple="multiple"></dept-tree-root>
        </div>
      </popup>
    </div>
  </div>
</template>

<script scoped>
  import DeptTreeRoot from "./deptTreeRoot";
  import Tag from "../tag/tag";
  export default {
    name: "deptTree",
    components: {
      Tag,
      DeptTreeRoot
    },
    mounted() {},
    props: {
      value: {
        type: String,
        default () {
          return ""
        }
      },
      title: {
        type: String,
        default: "选择部门"
      },
      multiple: {
        type: Boolean,
        default () {
          return false
        }
      },
      readonly: {
        type: Boolean,
        default () {
          return false
        }
      }
    },
    data() {
      return {
        show: false,
      }
    },
    methods: {
      showTree() {
        if (this.readonly)
          return false
        this.show = true,
        this.$store.commit("CHANGE_DEFAULT_POPUP")
      },
      //选择按钮
      check() {
        this.$emit('input', this.checked.join(","))
        this.show = false;
      },
      deleteCheck(val) {
        this.checked.splice(this.checked.findIndex(item => item === val), 1)
        this.$emit('input', this.checked.join(","))
      },
      getValues(val) {
        return this.$refs.tree.getValues(val)
      }
    },
    computed: {
      tree() {
        return this.$store.state.deptTree
      },
      checked() {
        return this.value ? this.value.split(',') : []
      }
    },
    watch: {
      "$store.state.defaultPop"() {
        if (!this.$store.state.defaultPop) {
          this.show = false;
        }
      }
    }
  }
</script>

<style scoped>
.vux-popup-header-right{
  font-size: 12px;
}
</style>
